<%@page import="ca.lscs.model.UserType"%>
<%@page import="ca.lscs.model.ChecklistState"%>
<%@page import="ca.lscs.model.Checklist"%>
<%@page import="ca.lscs.model.ChecklistItem"%>
<%@page import="ca.lscs.model.ChecklistGroup"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.List"%>
<%@page import="com.googlecode.objectify.Key"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<%
		Checklist checklist = (Checklist)request.getAttribute("checklist");
		List<ChecklistGroup> groups = (List<ChecklistGroup>)request.getAttribute("groups");
		HashMap<Long, List<ChecklistItem>> groupItems = (HashMap<Long, List<ChecklistItem>>)request.getAttribute("groupItems");
	%>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>LSCS</title>
		<link rel="stylesheet" type="text/css" href="/css/checklist.css" />
		<link rel="stylesheet" type="text/css" href="/css/lscs.css" />
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script src="/js/closure/goog/base.js"></script>
		<script src="/js/weather.js"></script>
		<script type="text/javascript">
			goog.require('goog.net.XhrIo');
			goog.require('goog.Uri');
			goog.require('goog.dom');
			goog.require('lscs.weather.WeatherWidget');
			var address = '<%=checklist.getAddress()%>';
			
			function getMap() {
				var mapCanvas = document.getElementById("map_canvas");
				var geocoder = new google.maps.Geocoder();
				var latlng = new google.maps.LatLng(-34.397, 150.644);
			    geocoder.geocode( { 'address': address}, function(results, status) {
					if (status == google.maps.GeocoderStatus.OK) {
						var myOptions = {
							zoom: 12,
							center: results[0].geometry.location,
							mapTypeId: google.maps.MapTypeId.ROADMAP
						};
						var map = new google.maps.Map(mapCanvas, myOptions);
						var marker = new google.maps.Marker({
							map: map,
							position: results[0].geometry.location
						});
					} else {
						var errorMsg = goog.dom.createDom('label', null, 'Unable to retrieve map information');
						mapCanvas.appendChild(errorMsg);
				    	console.log(status);
					}
			    });
			}
			
			function init() {
				var weatherWidget = new lscs.weather.WeatherWidget(goog.dom.getElement('weather_canvas'), address);
				weatherWidget.load();
				getMap();
			}
		</script>
	</head>
	<body onload="init()">
		<%@include file="header.jsp"%>
		<div class="checklist">
			<form method="post">
			<button type="submit" class="action">Save</button>
			<%if(user.getType() == UserType.MANAGER) {%>
			<button type="button" class="action" onclick="top.location='/checklist/edit/<%=checklist.getId()%>'">Edit</button>
			<%}%>
			<div class="info">
				<table>
					<tr>
						<td class="infoName">Title: </td>
						<td><%=checklist.getTitle()%></td>
					</tr>
					<tr>
						<td class="infoName">Description: </td>
						<td><%=checklist.getDescription()%></td>
					</tr>
					<tr>
						<td class="infoName">File Number: </td>
						<td><%=checklist.getFileNumber()%></td>
					</tr>
					<tr>
						<td class="infoName">Land District: </td>
						<td><%=checklist.getLandDistrict()%></td>
					</tr>
					<tr>
						<td class="infoName">Created Date: </td>
						<td><%=checklist.getCreatedDate()%></td>
					</tr>
				</table>
			</div>
			<table>
			<%for(ChecklistGroup group : groups) {%>
				<tr class="group">
					<td colspan="4"><%=group.getDescription()%></td>
				</tr>
				<%
				int count = 0;
				for(ChecklistItem item : groupItems.get(group.getId())) {
					ChecklistState state = checklist.getItemState(item);
				%>
				<tr class="item <%=count%2 == 0 ? "even" : "odd"%>">
					<td class="description"><%=item.getDescription()%></td>
					<td>
						<input type="radio" <%=checklist.isSubmitted() ? "disabled=disdabled" : ""%> id="<%=item.getId()%>_<%=ChecklistState.UNANSWERED%>" name="<%=item.getId()%>" value="<%=ChecklistState.UNANSWERED%>" <%if(state == null || state == ChecklistState.UNANSWERED) {%>checked="checked"<%}%> />
						<label for="<%=item.getId()%>"><%=ChecklistState.UNANSWERED%></label>
					</td>
					<td>
						<input type="radio" <%=checklist.isSubmitted() ? "disabled=disdabled" : ""%> id="<%=item.getId()%>_<%=ChecklistState.YES%>" name="<%=item.getId()%>" value="<%=ChecklistState.YES%>" <%if(state == ChecklistState.YES) {%>checked="checked"<%}%> />
						<label for="<%=item.getId()%>"><%=ChecklistState.YES%></label>
					</td>
					<td>
						<input type="radio" <%=checklist.isSubmitted() ? "disabled=disdabled" : ""%> id="<%=item.getId()%>_<%=ChecklistState.NA%>" name="<%=item.getId()%>" value="<%=ChecklistState.NA%>" <%if(state == ChecklistState.NA) {%>checked="checked"<%}%> />
						<label for="<%=item.getId()%>"><%=ChecklistState.NA%></label>
					</td>
				</tr>
				<%
				count++;
				}
				%> 
			<%}%>
			</table>
			<button type="submit" class="action">Save</button>
			<%if(user.getType() == UserType.MANAGER) {%>
			<button type="button" class="action" onclick="top.location='/checklist/edit/<%=checklist.getId()%>'">Edit</button>
			<%}%>
		</form>
		</div>
		<div class="right-bar">
			<div id="map_canvas" style="width:300px; height:300px;"></div>
			<div>
				<p><%=checklist.getAddress()%>
			</div>
			<div id="weather_canvas" style="width:100px; height:100px; margin-top:25px"></div>
		</div>
	</body>
</html>